<template>
	<u-gap height="8"></u-gap>
	<view v-if="getType == 0" class="mx-[8px] p-[8px] flex flex-row items-center bg-[#FFFFFF] rounded-[4px]">
		<view v-if="selectAddress" class="flex-1 mr-[16px]">
			<view class="text-[14px] text-[#333333]">
				<text>收货人:{{selectAddress.LinkMan}}</text>
				<text class="ml-[16px]">手机号:{{selectAddress.Mobile}}</text>
			</view>
			<view class="text-[14px] text-[#666666] mt-[4px]">收货地址:{{selectAddress.AreaStr+selectAddress.Street}}</view>
		</view>
		<view class="flex-1 mr-[16px]" v-else>
			请选择收获地址
		</view>
		<u-button @click="changeAddress" class="flex-shrink-0" text="修改" plain shape="circle"></u-button>
	</view>
	<u-gap height="8"></u-gap>
	<view class="mx-[8px] p-[8px] bg-[#FFFFFF] rounded-[4px]">
		<text class="text-[16px] text-[#333333]">商品信息</text>
		<view class="mt-[8px] flex flex-row justify-between">
			<u-image :src="goodDetail.ImageUrl[0]" width="80" height="80"></u-image>
			<view class="flex flex-col items-end text-[#666666] text-[12px]">
				<text>¥{{goodDetail.MemberPrice}}</text>
				<text>x{{goodDetail.Num}}</text>
			</view>
		</view>
	</view>
	<u-gap height="8"></u-gap>
	<view class="mx-[8px] p-[8px] bg-[#FFFFFF] rounded-[4px]">
		<u-gap height="20"></u-gap>
		<view class="flex flex-row items-center justify-between text-[14px] leading-[30px]">
			<text class="text-[#333333]">商品总额</text>
			<text class="text-[#666666]">¥{{goodDetail.MemberPrice * goodDetail.Num}}</text>
		</view>
		<view class="flex flex-row items-center justify-between text-[14px] leading-[30px]">
			<text class="text-[#333333]">运费</text>
			<text class="text-[#666666]">0.00</text>
		</view>
		<view class="flex flex-row items-center text-[14px] leading-[30px]">
			<text class="text-[#333333]">发货方式</text>
			<u-radio-group v-model="getType" activeColor="#d81e06" class="ml-[20px]" placement="row">
				<u-radio :name="0" label="快递"></u-radio>
				<u-radio :name="1" :customStyle="{marginLeft: '8px'}" label="自提"></u-radio>
			</u-radio-group>
		</view>
	</view>
	<u-gap height="8"></u-gap>
	<view class="mx-[8px] p-[8px] bg-[#FFFFFF] rounded-[4px] flex flex-row items-center">
		<text class="mr-[16px] text-[#333333] text-[14px]">留言</text>
		<u-input v-model="remark" border="bottom" clearable placeholder="建议留言前先与商家沟通确认"></u-input>
	</view>
	<u-gap height="44" class="pb-safe-nopadding"></u-gap>
	<view class="fixed left-0 bottom-0 w-full h-[51px] pb-safe-nopadding bg-[#FFFFFF]">
		<u-line :hairline="false"></u-line>
		<view class="h-[50px] flex flex-row items-center justify-end">
			<view class="flex flex-row items-baseline">
				<text class="text-[14px]">实付金额/积分：</text>
				<text class="text-[14px] text-[#d81e06]">¥</text>
				<text class="text-[20px] text-[#d81e06] font-semibold ml-[4px]">{{goodDetail.MemberPrice * goodDetail.Num}}</text>
			</view>
			<u-button @click="toSubmit()" shape="circle" text="提交订单" color="#d81e06" :customStyle="{marginLeft:'16px',marginRight:'16px',paddingLeft:'32px',paddingRight:'32px'}"></u-button>
		</view>
	</view>
	<u-popup :show="payModal" mode="bottom" round="8" @close="closePop">
		<view class="px-[8px] py-[16px] flex flex-row items-center justify-between">
			<view class="text-[14px] text-[#333333]">请选择支付</view>
			<view class="text-[14px] text-[#333333]">
				<text>支付金额：</text>
				<text class="text-[18px] text-[#d81e06] font-semibold">¥{{goodDetail.MemberPrice * goodDetail.Num}}</text>
			</view>
		</view>
		<u-line></u-line>
		<u-radio-group v-model="selectPayType" activeColor="#d81e06" iconPlacement="right" placement="column">
			<view v-for="(item,index) in payType" :key="item.value" class="px-[8px] flex flex-row items-center">
				<u-image :src="item.image" width="24" height="24"></u-image>
				<u-radio style="flex:1" class="h-[40px] leading-[40px] ml-[4px]" :label="item.label" :name="item.value"></u-radio>
			</view>
		</u-radio-group>
		<u-gap height="20"></u-gap>
		<u-button @click="pay" text="立即付款" color="#d81e06" size="large" shape="circle" class="mx-[8px]"></u-button>
		<u-gap height="20"></u-gap>
	</u-popup>
</template>

<script setup>
	import {computed, nextTick, ref} from "vue";
	import * as api from "@/api.js";
	import * as uniapp from "@dcloudio/uni-app";
	import {useUserStore} from "@/store/config.js";
	
	const store = useUserStore();
	const goodDetail = ref();
	const selectAddress = ref();
	const getType = ref(0);
	const selectPayType = ref();
	const remark = ref('');
	
	const toSubmit = async() => {
		//if(!!selectPayType.value || selectPayType.value === 0) {
			//生成订单
			if(!selectAddress.value&& parseInt(getType.value)==0) {
				uni.showToast({
					icon:'none',
					title:'请选择收货地址'
				})
				return;
			}
			
			uni.showLoading();
			const result = await api.createOrder(store.user.UserID,{
				ProductID: goodDetail.value.ProductID,
		        Num: goodDetail.value.Num,
				//payType: selectPayType.value,
				Remark: remark.value,
				LinkMan: selectAddress.value.LinkMan,
				Mobile: selectAddress.value.Mobile,
				Address: selectAddress.value.Street,
				AreaID: selectAddress.value.AreaID,
				LogisticsType: getType.value,
			});
			uni.hideLoading();
			await nextTick();
			if(result[1]) {
				uni.showToast({
					icon:'none',
					title:result[1]
				})
			} else {
				//生成订单
				console.log(result[0]);
				await uni.$u.sleep(800);
				//重定向到我的订单
				uni.redirectTo({
					url:`/pages/order/orderList`
				})				
			}
		//} else {
		//	uni.showToast({
		//		icon:'none',
		//		title:'请选择支付方式'
		//	})
		//}
	}
	
	const changeAddress = () => {
		uni.$off('addressChange');
		uni.$once('addressChange', params => {
			selectAddress.value = params
		})
		uni.navigateTo({
			url:`/pages/address/addressList`
		})
	}
	
	uniapp.onLoad(async option => {
		if(option.goodDetail){
			goodDetail.value = JSON.parse(decodeURIComponent(option.goodDetail))
		}
		const result = await api.getDefaultAddress(store.user.UserID);
		if(result[0]) {
			selectAddress.value = result[0];
		}
	})
</script>

<style>

</style>
